import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { Bars, HBars } from '@/components/charts/charts';
import { LaunchesTable } from '@/components/launches/launches-table';
import { SitesMap } from '@/components/launches/sites-map';
import { Block, Empty, Head } from '@/components/satellite/primitives';
import { Container, Stat } from '@/components/ui/section';
import { Unavailable } from '@/components/ui/unavailable';
import { api, ApiError, safe } from '@/lib/api';
import { fmtDate, fmtInt, num } from '@/lib/format';
import { routes, SITE_URL } from '@/lib/site';

type Params = { params: Promise<{ slug: string }> };
type SiteDetail = Awaited<ReturnType<typeof api.launchSite>>['data'];

async function load(slug: string): Promise<SiteDetail> {
  try {
    return (await api.launchSite(slug)).data;
  } catch (e) {
    if (e instanceof ApiError && e.notFound) notFound();
    throw e;
  }
}

/** The detail endpoint has no totals; derive them from the per-year series (real data, no guesses). */
function totals(s: SiteDetail) {
  const launches = s.years.reduce((a, y) => a + (num(y.launches) ?? 0), 0);
  const payloads = s.years.reduce((a, y) => a + (num(y.payloads) ?? 0), 0);
  const first = s.years[0]?.year ?? null;
  const last = s.years[s.years.length - 1]?.year ?? null;
  const lastLaunch = s.recent_launches.reduce<string | null>((m, l) => (l.launch_date && (!m || l.launch_date > m) ? l.launch_date : m), null);
  return { launches, payloads, first, last, lastLaunch };
}

export async function generateMetadata({ params }: Params): Promise<Metadata> {
  const { slug } = await params;
  const res = await safe(api.launchSite(slug));
  if (!res) return { title: 'Launch site', robots: { index: false } };
  const s = res.data;
  const t = totals(s);
  const title = `${s.name} — Launch site${s.country_name ? `, ${s.country_name}` : ''}`;
  const description = `${s.name}${s.country_name ? ` (${s.country_name})` : ''}: ${fmtInt(t.launches)} orbital launches and ${fmtInt(t.payloads)} payloads${t.first ? ` since ${t.first}` : ''}${t.lastLaunch ? `, most recent on ${fmtDate(t.lastLaunch)}` : ''}. Launches per year, recent launches and top owners on SatelliteIndex.`;
  const canonical = routes.launchSite(s.slug);
  return { title, description, alternates: { canonical }, openGraph: { title, description, url: `${SITE_URL}${canonical}` }, twitter: { card: 'summary', title, description } };
}

export default async function LaunchSitePage({ params }: Params) {
  const { slug } = await params;
  const s = await load(slug);
  const t = totals(s);
  const hasCoords = s.latitude !== null && s.longitude !== null;
  const yearsData = s.years.map((y) => ({ x: String(y.year), y: num(y.launches) ?? 0 }));
  const owners = [...s.owners].sort((a, b) => (num(b.launches) ?? 0) - (num(a.launches) ?? 0)).slice(0, 12);
  const jsonLd = { '@context': 'https://schema.org', '@type': 'Place', name: s.name, url: `${SITE_URL}${routes.launchSite(s.slug)}`, identifier: s.code, ...(hasCoords ? { geo: { '@type': 'GeoCoordinates', latitude: s.latitude, longitude: s.longitude } } : {}), ...(s.country_name ? { address: { '@type': 'PostalAddress', addressCountry: s.country_code ?? s.country_name } } : {}) };

  return (
    <Container wide>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
      <header className="pb-6 pt-6 md:pt-10">
        <p className="eyebrow mono">
          Launch site · {s.code}
          {hasCoords && <> · {s.latitude!.toFixed(2)}°, {s.longitude!.toFixed(2)}°</>}
        </p>
        <h1 className="display mt-2 break-words text-3xl md:text-5xl">{s.name}</h1>
        <p className="mt-3 text-sm text-ink-2">
          {s.country_slug ? <Link href={routes.country(s.country_slug)} className="link">{s.country_name}</Link> : s.country_name ?? 'Country unknown'}
          {' · '}
          <Link href={routes.launches(`site=${encodeURIComponent(s.slug)}`)} className="link">All launches from this site</Link>
        </p>
      </header>

      <div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] lg:items-start">
        <div className="grid grid-cols-2 gap-x-4 gap-y-6 sm:grid-cols-4 lg:grid-cols-2">
          <Stat label="Orbital launches" value={fmtInt(t.launches)} hint={t.first ? `since ${t.first}` : undefined} />
          <Stat label="Payloads" value={fmtInt(t.payloads)} />
          <Stat label="Active years" value={fmtInt(s.years.length)} hint={t.first && t.last ? `${t.first} – ${t.last}` : undefined} />
          <Stat label="Most recent launch" value={<span className="text-xl md:text-2xl">{fmtDate(t.lastLaunch)}</span>} hint={t.lastLaunch ? undefined : 'no dated launch in the recent list'} />
        </div>
        <div>
          {hasCoords ? <SitesMap sites={[{ code: s.code, name: s.name, slug: s.slug, country_code: s.country_code, latitude: s.latitude, longitude: s.longitude, launches: t.launches, launches_last_365d: 0, last_launch: t.lastLaunch }]} highlight={s.slug} labelTop={1} /> : <Unavailable what="Site coordinates" compact />}
        </div>
      </div>

      <div className="mt-6 divide-y divide-[color:var(--rule)]">
        <Block id="years">
          <Head eyebrow="Cadence" title="Launches per year" />
          {yearsData.length ? <Bars data={yearsData} title={`Launches per year from ${s.name}`} height={200} xTicks={10} highlightLast /> : <Empty>No dated launches on file.</Empty>}
        </Block>

        <Block id="recent">
          <Head eyebrow="Recent" title={<>Recent launches <span className="tnum text-ink-3">· {fmtInt(s.recent_launches.length)}</span></>} action={{ href: routes.launches(`site=${encodeURIComponent(s.slug)}`), label: 'Full list' }} />
          {s.recent_launches.length ? <LaunchesTable rows={s.recent_launches} showSite={false} ownerHref={(c) => routes.launches(`site=${encodeURIComponent(s.slug)}&owner=${encodeURIComponent(c)}`)} /> : <Empty>No launches recorded for this site.</Empty>}
        </Block>

        <Block id="owners">
          <Head eyebrow="Customers" title="Top owners launched from here" />
          {owners.length ? (
            <HBars data={owners.map((o) => ({ label: `${o.name} (${o.code})`, value: num(o.launches) ?? 0 }))} max={num(owners[0]?.launches) ?? undefined} />
          ) : (
            <Empty>No owner information for the objects launched from this site.</Empty>
          )}
          {owners.length > 0 && (
            <ul className="mt-3 flex flex-wrap gap-1.5">
              {owners.map((o) => (
                <li key={o.code}>
                  <Link href={routes.launches(`site=${encodeURIComponent(s.slug)}&owner=${encodeURIComponent(o.code)}`)} className="mono inline-flex min-h-9 items-center rounded-md border border-rule px-2.5 text-xs text-ink-2 hover:border-rule-strong hover:text-ink">{o.code}</Link>
                </li>
              ))}
            </ul>
          )}
        </Block>
      </div>

      <p className="pb-10 pt-4 text-2xs text-ink-3">
        Totals are summed from the per-year series of launches attributed to site code {s.code} in SATCAT; launches are derived from international designators (<Link href={routes.methodology()} className="hover:text-accent">methodology</Link>).
      </p>
    </Container>
  );
}